<template>
  <div class="fullpage-container">
    <div
      class="fullpage-wp"
      id="fullpage-wp"
      @mousedown="mousedown"
      @mousemove="mousemove"
      @mouseup="mouseup"
    >
      <slot></slot>
    </div>
    <div class="fullpage-ctrl" v-if="showPageCtrl">
      <div class="fullpage-ctrl-item" :class="{ active: curPage === item }" v-for="item in totalList" @click.stop="handlePageCtrl(item)"></div>
    </div>
  </div>
</template>

<script>
  import DomUtil from '@/utils/DomUtil.js';

  export default {
    name: "full-page",
    props: {
      // 开始页码
      startPage: {
        type: Number,
        default: 1
      },
      // 每屏动画时间，默认是500ms
      duration: {
        type: Number,
        default: 500
      },
      // 最小滑动距离，超出了就触发滚动效果
      der: {
        type: Number,
        default: 0.1
      },
      // 移动到距离边线多少以内算不能移动了
      borderPX: {
        type: Number,
        default: 30
      },
      // 是否显示pageCtrl
      showPageCtrl: {
        type: Boolean,
        default: false
      }
    },
    data(){
      return{
        curPage: this.startPage || 1,
        totalPage: 0,
        pageWidth: 0,
        pageHeight: 0,
        wpDom: null,
        moveFlag: false
      }
    },
    computed: {
      totalList() {
        let arr = [];
        for (let i = 0; i < this.totalPage; i++) {
          arr.push(i + 1);
        }
        return arr;
      }
    },
    watch: {
      curPage(newPage){
        this.$root.eventBus.$emit("toggle-animate", newPage);
      }
    },
    mounted(){
      this.$root.eventBus.$emit("toggle-animate", this.curPage);
      this.initDomData();
      window.addEventListener('resize', this.initDomData);
      window.addEventListener('mousewheel', this.handleMouseWheel);
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.initDomData);
      window.removeEventListener('mousewheel', this.handleMouseWheel);
    },
    methods: {
      initDomData() {
        this.wpDom = document.querySelector("#fullpage-wp");
        this.totalPage = this.wpDom.childNodes.length;
        this.pageWidth = DomUtil.getComputedStyle(this.wpDom, "width");
        this.pageHeight = DomUtil.getComputedStyle(this.wpDom, "height");
        this.initWp();
      },
      initWp(){
        DomUtil.setDomStyle(this.wpDom, "transition", "all 500ms ease-out 0s");
        const y = `translateY(-${(this.curPage - 1) * this.pageHeight}px)`;
        DomUtil.setDomStyle(this.wpDom, "transform", y);
      },
      handleMouseWheel(e) {
        if (e.wheelDelta / 120 > 0) {  // 向上滚
          if (this.curPage === 1) return;
          this.curPage--;
          this.initWp();
        } else {
          if (this.curPage === this.totalPage) return;
          this.curPage++;
          this.initWp();
        }
      },
      handlePageCtrl(cur){
        this.curPage = cur;
        this.initWp();
      },
      mousedown(e) {
        this.startX = e.pageX;
        this.startY = e.pageY;
        this.moveFlag = true;
      },
      mousemove(e) {
        if (this.moveFlag) {
          let curY = (this.curPage - 1) * this.pageHeight;
          const y = `translateY(${ -1 * (curY - e.pageY + this.startY) }px)`;
          DomUtil.setDomStyle(this.wpDom, "transition", "none");
          DomUtil.setDomStyle(this.wpDom, "transform", y);

          // if (e.pageY < this.borderPX || e.pageY > this.pageHeight - this.borderPX) {
          //   this.mouseup(e);
          // }
        }
      },
      mouseup(e) {
        this.moveFlag = false;
        // 超过限度
        if (Math.abs(e.pageY - this.startY) / this.pageHeight > this.der) {
          let n = e.pageY > this.startY ? -1 : 1;
          this.curPage += n;
          if (this.curPage < 1) {
            this.curPage = 1;
          }
          if (this.curPage > this.totalPage) {
            this.curPage = this.totalPage;
          }
        }
        this.initWp();
      }
    }
  }
</script>

<style scoped>
  .fullpage-container{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .fullpage-wp {
    display: flex;
    width: 100%;
    height: 100%;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  .fullpage-wp.anim{
    transition: all 500ms ease-out 0s;
  }
  .fullpage-wp .fullpage-item{
    box-sizing: border-box;
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
  }
  .fullpage-ctrl{
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
  }
  .fullpage-ctrl .fullpage-ctrl-item{
    flex: 1;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #909399;
    margin: 10px 0px;
    cursor: pointer;
  }
  .fullpage-ctrl .fullpage-ctrl-item.active{
    background: #409EFF;
  }
</style>